<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>fengqin.html</title>
	<style type="text/css">
		.box{
			width: 980px;
			height: 200px;
		}
		.list{
			width: 60px;
			height: 200px;
			background: red url() 0 0 no-repeat;
			float: left;
			list-style: none;
			color: #fff;
			font-size: 30px;
			cursor: pointer;
		}
		.color1{
			background: #2E1527 url() 0 0 no-repeat;
		}
		.color2{
			background: #4B2020 url() 0 0 no-repeat;
		}
		.color3{
			background: #9A9D8E url() 0 0 no-repeat;
		}
		.color4{
			background: #1D2C35 url() 0 0 no-repeat;
		}
		.color5{
			background: #746D4C url() 0 0 no-repeat;
		}
		.color6{
			background: #39798B url() 0 0 no-repeat;
		}
		.color7{
			background: #2A2A2D url() 0 0 no-repeat;
		}
		.color8{
			background: #634471 url() 0 0 no-repeat;
		}
	</style>
	<script type="text/javascript" src="./jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function  () {
			$('.list').click(function(event) {
				$(this).animate({'width': '460px'},200).siblings().animate({'width': '60px'},200);
			});
		})

	</script>
</head>
<body>
	<ul class="box">
		<li class="list color1">1</li>
		<li class="list color2">2</li>
		<li class="list color3">3</li>
		<li class="list color4">4</li>
		<li class="list color5">5</li>
		<li class="list color6">6</li>
		<li class="list color7">7</li>
		<li class="list color8">8</li>
	</ul>
</body>
</html>